iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0
自我挑戰組

50後阿嬤教你寫程式!系列 第 22

Day 22 阿嬤帶你探索 HTML!(上)

  • 分享至 

  • xImage
  •  

Day 22 阿嬤帶你探索 HTML!(上)

呦嗨
來簡單介紹一下 HTML 吧!
HTML (HyperText Markup Language)是一種描述超文件的註記語言 SGML (Standard Generalized Markup Language)所制訂出的一種網頁語,基本上,幾乎所有的瀏覽器都支持 HTML 現在 HTML 被廣泛的運用在各種廣大平台,包括我們常看的:Facebook、YouTube、Instagream 等知名部落格網頁,也可以在 HTML 中加入支援的元素,例如:表單、表格、文字、圖片等。

安裝 HTML 編輯器

這次我們用到的基本上都是文字編輯器(text editor)下面會針對每一個系統推薦好用的 HTML 文字
編輯器:

  Sublime Text 是一個同時支持 Windows、Mac OS 和 Linux 的文字編輯器。可以免費下載
但是在用一陣子過後,他就會會要求你買一個軟體許可證,但如果你不想購買,你可以選擇免費的方案

  Notepad++ 適宜 Microsoft、Windows 系統的你
  
  TextWrangler 適宜 Mac OS 系統的果粉
  
以上就是一些好用的文字編輯器。

編寫 HTML 文字

下載好 HTML 文字編輯器後,我們就可以開始來玩 HTML 啦!但要怎麼玩呢?看我操作不就好嗎:

<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
</head>
<body>
  <h1>講解專用</h1>
</body>
</html>

在上例中,<title>表示這整個程式碼的標題 ,<h1>表示這個網頁的主標題,就像這樣:

h 後面的數字就等於這個主標題的字體大小,例如我把他變成 5,就會變這樣:

吼,跟前面的字體大小差很多齁。而</h1>代表著整個主標題的結束,就像我們寫作文時的
「。」JavaScript 的「;」這樣大概能理解了吧。

你也可以試著添加好多的主標題,就像下面這樣:

要怎麼達成這樣的效果呢?
就只需要這幾句程式碼,即可達成這樣的效果

<h1>講解專用</h1>
<h2>講解專用</h2>
<h3>講解專用</h3>
<h4>講解專用</h4>
<h5>講解專用</h5>

對的沒錯,就是添加跟第一句一樣的程式碼,然後修改 h 後面的數字而已,真的不難!!
不會的話來我家我教你吧。偷告訴你們,h 後面的數字越靠近 0,字的大小就會越大(不包含0)
相反,h 後面的數字越遠於 0,字的大小就會越小,有點像數學中的「負數」。

小總結

這章我們認識了網頁架構之一 HTML,還知道了他的基礎概念,下一章我們會講到進階版的 HTML 文
字程式碼,請敬請期待!!


上一篇
Day 21 不只阿嬤會動!元素也會動!(下)
下一篇
Day 23 阿嬤帶你探索 HTML!(下)
系列文
50後阿嬤教你寫程式!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言